<template>
  <div>
    <NavBar>
        <template #title>收货地址</template>
    </NavBar>
    <div class="addresslist">
        <van-radio-group v-model="checkedId">
            <div class="item" v-for="item in addressList" :key="item.address_id">
                <van-radio :name="item.address_id"></van-radio>
                <!-- <input type="radio" name="default" @click="toggle(item.address_id)" :value="item.isChecked"> -->

                <!-- <input type="radio" name="default" :value="item.isChecked" @click="toggle(item.address_id)"> -->
                <div class="itemdetail">
                    <h5>{{ item.name }}<i> {{ item.phone }}</i>&nbsp;<div class="default" v-if="checkedId === item.address_id">默认</div></h5>
                    <span>{{ item.region.city }}{{ item.region.province }}{{ item.region.region }}</span>
                </div>
                <van-icon @click="editAddress(item.address_id)" name="edit" />
            </div>
        </van-radio-group>
    </div>
    <div class="overlay" v-show="isShowOverlay">
        <div class="form-container">
            <h3>填写信息</h3>
            <form class="form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="editDetail.name">
            </div>
            <div class="form-group">
                <label for="email">电话</label>
                <input type="text" id="email" v-model="editDetail.phone">
            </div>
            <div class="form-group">
                <label for="city">城市</label>
                <select id="city" v-model="editDetail.city_id" @change="handleChange">
                <option value="">请选择城市</option>
                <option value="783" key="">上海</option>
                <option value="785">北京</option>
                <option value="784">深圳</option>
                <option value="786">广西</option>
                <option value="782">河南</option>

                </select>
            </div>
            <div class="bottom">
                <button @click="isShowOverlay = false" class="submit-btn">取消</button>
                <button @click="submitNewAdress" class="submit-btn">提交</button>
            </div>

            </form>
        </div>
    </div>
    <button class="add" @click="$router.push('/newaddress')">新增地址</button>
  </div>
</template>

<script>
// import { Dialog } from 'vant'
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  created () {
    this.getAddressListAction()
  },
  computed: {
    ...mapState('address', ['addressList'])
  },
  watch: {
    checkedId (value) {
    //   console.log(value)
      this.setDefaultAddressAction(value)
    }
  },
  data () {
    return {
      chosenAddressId: '1',
      checkedId: Number(this.$route.query.addressId) || 21833,
      isShowOverlay: false,
      editDetail: {}

    }
  },
  methods: {
    ...mapActions('address', ['getAddressListAction', 'setDefaultAddressAction', 'editAddressAction']),
    ...mapMutations('address', ['toggleCheckbox']),
    toggle (id) {
      this.toggleCheckbox(id)
    },
    editAddress (id) {
      this.isShowOverlay = true
      this.editDetail = this.addressList.find(item => item.address_id === id)
    //   console.log(this.editDetail)
    },
    submitNewAdress () {
      console.log(this.editDetail)
      this.editAddressAction(this.editDetail)
      this.isShowOverlay = false
    },
    handleChange (event) {
      this.editDetail.region.province = event.target.options[event.target.selectedIndex].text
    }
  }
}
</script>

<style scoped>
h5{
    margin-bottom: 5px;
}
i{
    font-style: normal;
}
.addresslist {
    background-color: rgb(247, 248, 250);
    width: 100%;
    height: 100%;
    padding: 7px 7px;
}
.addresslist .item {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    padding: 10px;
}
.addresslist .itemdetail {
    font-size: 16px;
    width: 240px;
}
.itemdetail span{
    font-size: 15px;
}
.itemdetail .default {
    display: inline-block;
    width: 30px;
    text-align: center;
    background-color: red;
    border-radius: 5px;
    color: white;
}
.add{
    position: absolute;
    width: 250px;
    height: 50px;
    left: 50%;
    margin-left: -125px;
    bottom: 10px;
    border: none;
    border-radius: 25px;
    color: white;
    background-color: red;
    font-size: 18px;
}
.item {
    margin-top: 10px;
}
.active {
    display: none;
}
/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保遮罩层在最上层 */
}

/* 表单容器 */
.form-container {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px; /* 限制最大宽度 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-container h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #333;
  text-align: center;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
}

/* 输入框和下拉框样式 */
.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box; /* 防止 padding 影响宽度 */
}

.form-group select {
  appearance: none; /* 移除默认下拉箭头 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* 提交按钮样式 */
.bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.submit-btn {
  width: 40%;
  padding: 12px;
  background-color: red; /* 绿色 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

</style>
